<template>
    <Transition name="login">
        <div class='login-view' v-if="isShow">
            <div class="content">
                <div class="title">请 先 登 录</div>
                <div class="inner">
                    <el-form :model="userForm" :rule="rules" ref="ruleFormRef">
                    <el-form-item label="账号" prop="userName">
                        <el-input v-model="userForm.userName" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="userForm.password" @keydown.prevent.enter="submit" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    </el-form>
                </div>
                <div class="footer">
                    <el-button @click="resetForm(ruleFormRef)" plain>重置</el-button>
                    <el-button type="primary" @click="submit">登录</el-button>
                </div>
            </div>
        </div>
    </Transition>
</template>

<script setup lang="ts">
import { formRules, getDateGap } from '@/utils/tools'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
// @ts-ignore
import { generateSecureDailyPassword } from './index'
import { getAdminPassword } from '@/utils/globle.ts'
const isTest:Ref<boolean> = inject('$isTest') as Ref<boolean>
const isLogin = defineModel({ required: true })
// 表单
const userForm:Ref<{
    userName:string,
    password:string,
}> = ref({
    userName:'admin',
    password:''
})
// 获取当前正确密码
const getPassword = () => {
    // let password = isTest.value ? generateSecureDailyPassword() : getAdminPassword()
    let password = 'admin123'
    return password
}
let correct = getPassword()
// 是否显示登录弹框
const isShow:Ref<boolean> = ref(false)
// 登录
const submit = ()=>{
    if(userForm.value.userName !== 'admin'){
        ElMessage.warning('账号错误')
    }else if(userForm.value.password != correct){
        ElMessage.warning('密码错误')
    }else{
        ElMessage.success('登录成功！')
        isShow.value = false
        isLogin.value = true
        localStorage.setItem("$user",JSON.stringify({
            password: userForm.value.password,
            time:new Date()
        }))
    }
}
// 检查当前是否需要登录
const isNeedLogin = ()=>{
    const last = JSON.parse(localStorage.getItem('$user')||'{ "password":"", "time":"" }')
    let { password, time } = last
    password ||= ''
    const isAdmin = password.slice(0,4) == '0731'
    // 区分是否管理员登录
    if(isAdmin){
        if(getDateGap(time, new Date()) > 7){
            isShow.value = true
            isLogin.value = false
        }
    }else{
        if(correct !== password || !password) {
            isShow.value = true
            isLogin.value = false
        }
    }
}

isNeedLogin()
// 重置按钮
const ruleFormRef = ref<FormInstance>()
const rules = {
    userName:formRules('$noAir'),
    password:formRules('$noAir'),
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 开启管理员模式
document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "Enter") {
        correct = getAdminPassword()
    }
});
</script>

<style lang="scss" scoped>
.login-view{
    &.isShow{
        display: none;
    }
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2000;
    background-color: #0000008b;
    .content{
        width: 400px;
        height: 230px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background: linear-gradient(to top right,rgb(236, 250, 250),rgb(219, 251, 219));
        border-radius: 20px;
        box-shadow: 1px 1px 5px rgb(185, 185, 185);
        padding: 20px;
        .title{
            text-align: center;
            font-size: 20px;
            color: #3c3c3c;
        }
        .inner{
            padding: 15px 50px 0 50px;
        }
        .footer{
            padding-top: 10px;
            text-align: center;
        }
    }
}
.login-enter-active {
    animation: move 0.5s;
}

/* 离开动画 */
.login-leave-active {
    animation: move 0.5s reverse;
}

@keyframes move {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
</style>